import React, { createContext } from 'react';
import { COMMUNICATE_RESULT_ENUM } from '@/pages/Recruitment/dictionary';
import { useRequest, defaultFormatResult } from '@/hooks';
import { getCandidateInfo, getCommunicateInfo } from '@/pages/Recruitment/service';
import { PageContainer } from '@/molecules';
import cn from 'classnames';
import { Form, Row, Spin, Card } from 'antd';
import { TalentInfoHead, TitleControl } from '@/pages/Recruitment/components';
import {
    Contact,
    DiffSalary,
    OriginalSalary,
    SuggestSalary,
    HireInfo,
    Result
} from '@/pages/Recruitment/Hire/Communicate/containers';
import { usePositionAndRank } from '@/pages/Recruitment/Hire/hooks';

import styles from './index.less';

// import cn from 'classnames';
// import styles from './index.less';

// const communicateResultTitle = (title, { commInfo = {} }) => (
//     <div className={styles.communicateResultTitle}>
//         <span>{title}</span>
//         <span
//             className={cn(styles.hireStatus, {
//                 [styles.hireStatusOut]: [3, 4].includes(commInfo.resultType),
//                 [styles.hireStatusAgree]: commInfo.resultType === 1
//             })}
//         >
//             {commInfo.resultName}
//         </span>
//     </div>
// );

const formItemLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 14 }
};

const oneLineLayout = {
    labelCol: { span: 3 },
    wrapperCol: { span: 19 }
};

const RecorderStateContext = createContext(); // 保存多个录音机录制状态用，用于那个互斥的需求。

const CommunicateDetail = props => {
    const {
        location: { query },
        form
    } = props;

    // 判断当前状态,又是神奇的设计
    const { candidateId, employId } = query;

    let isSecond = false; // HR二次确认
    const isDepart = false; // 用人部门
    const isEdit = false; // 可编辑表单

    // 候选人信息
    const { data: originalTalentInfo = {}, loading: talentInfoLoading } = useRequest(
        () => getCandidateInfo(candidateId),
        {
            refreshDeps: [candidateId],
            ...defaultFormatResult
        }
    );

    const {
        positionName,
        positionCode,
        companyAreaCode,
        employSalaryCurrencyCode,
        organizationName
    } = usePositionAndRank(employId);

    const talentInfo = {
        ...originalTalentInfo,
        positionName,
        positionCode,
        companyAreaCode,
        employSalaryCurrencyCode,
        organizationName
    };

    // 沟通信息
    const { data: commInfoLists = [], loading: commInfoListLoading } = useRequest(() => getCommunicateInfo(employId), {
        refreshDeps: [employId],
        ...defaultFormatResult
    });
    const commInfoList = commInfoLists.map((item, index) => {
        const tag = (
            <span
                className={cn(styles.hireStatus, {
                    [styles.hireStatusOut]: [COMMUNICATE_RESULT_ENUM.PREOUT, COMMUNICATE_RESULT_ENUM.OUT].includes(
                        item?.resultType
                    ),
                    [styles.hireStatusAgree]: item?.resultType === 1
                })}
            >
                {item?.resultName}
            </span>
        );
        let title = <span>首次薪资沟通（{item.communicateTime}）</span>;
        if (commInfoLists.length >= 2 && index === 0) {
            isSecond = true;
            title = <span>二次薪资沟通（{item.communicateTime}）</span>;
        }

        return {
            ...item,
            title: [title, tag]
        };
    });
    const renderItem = (EditComponent, ViewComponent, editFlag = isEdit) => (editFlag ? EditComponent : ViewComponent);

    const commonProps = {
        form,
        talentInfo,
        oneLineLayout,
        renderItem,
        isEdit,
        isDepart,
        isSecond,
        commInfo: commInfoLists.length ? commInfoLists[0] : {}
    };

    return (
        <PageContainer>
            <Row>
                <Spin spinning={talentInfoLoading}>
                    <TalentInfoHead talent={talentInfo} />
                </Spin>
            </Row>
            <Spin spinning={commInfoListLoading}>
                {commInfoList.map((item, index) => (
                    <TitleControl title={item.title} bottomBorder={index !== commInfoList.length - 1}>
                        <Form {...formItemLayout}>
                            {/* <TitleControl
                                title="沟通结果："
                                showButton={false}
                                commInfo={item}
                                titleRender={communicateResultTitle}
                            >
                                <Form.Item label="沟通记录" {...oneLineLayout}>
                                    {item.remark}
                                </Form.Item>
                            </TitleControl> */}
                            <Card style={{ marginTop: 16 }}>
                                <Result
                                    {...{
                                        ...commonProps,
                                        commInfo: item,
                                        isSecondRecord: commInfoList.length === 2 && index === 0
                                    }}
                                />
                            </Card>
                            <TitleControl title="联系记录" showButton={false}>
                                <RecorderStateContext.Provider
                                    value={{
                                        isRecording: false,
                                        changeState: () => {}
                                    }}
                                >
                                    {item.recruitEmployContactVOList.map((item1, index1) => (
                                        <Contact
                                            key={item1.key || item1.id}
                                            index={index1}
                                            allowRemove={false}
                                            recordButtonRef={React.createRef()}
                                            communicateInfo={item1}
                                            {...commonProps}
                                        />
                                    ))}
                                </RecorderStateContext.Provider>
                            </TitleControl>
                            <TitleControl title="原薪资福利" showButton={false}>
                                {/* 神奇的判断展示... */}
                                <OriginalSalary {...commonProps} commInfo={item} />
                            </TitleControl>
                            <TitleControl title="建议薪资" showButton={false}>
                                <SuggestSalary {...commonProps} commInfo={item} />
                            </TitleControl>
                            <TitleControl title="薪资对比" showButton={false}>
                                <DiffSalary {...commonProps} commInfo={item} />
                            </TitleControl>
                            {item?.hiDataId && (
                                <TitleControl title="录用信息" bottomBorder={false} showButton={false}>
                                    <HireInfo {...commonProps} commInfo={item} />
                                </TitleControl>
                            )}
                        </Form>
                    </TitleControl>
                ))}
            </Spin>
        </PageContainer>
    );
};
export default Form.create()(CommunicateDetail);
